
<script lang="ts" setup>
import { ref ,onMounted} from 'vue'
import type { Ref } from 'vue'
import {getLike,addLike} from '@/api/like'
interface iLike{
  imgid:number
  price:string
  imgurl:string
  title:string
  city:string
}
const likeList:Ref<iLike[]> = ref([])
onMounted(() => {
  // 获取自定义图片数据
  getLike().then(res=>{
    console.log(res);
    likeList.value = res.data.data
    // console.log(likeList.value); 
  })


  addLike().then(res=>{
    console.log(res);
  })
  
});
let flag = ref(false)
function onFocus(e: any) {
    flag.value = true
}

const test = ref('')
function oncancel() {
    test.value = ''
}


</script>

<template>
    <div>
        <van-nav-bar title="收藏夹" left-text="返回" left-arrow @click-left="$router.back()" />
    </div>
    <div class='container'>
        <form action="/">
            <van-search :v-model="test" :show-action="flag" action-text="x" placeholder="搜索" @focus="onFocus($event)"
                @cancel="oncancel" />
        </form>

        <!-- <van-swipe-cell>
            <van-card price="600" desc="珠海.3居3床6人.123平米" title="拱北华山别墅" class="goods-card"
                :thumb="img">
                <template #footer>
                    <van-button plain hairline  size="small">找相似</van-button>
                    <van-button plain hairline size="small">找相似</van-button>
                </template>
            </van-card>

        </van-swipe-cell> -->
        <div class="hotel">
          <van-tabs>
          <van-tab>
          <van-skeleton :animate="false" v-for="item in likeList" :key="item.imgid">
            <template #template>
              <div  :style="{ display: 'flex', width: '100%' }">
                <img @click="$router.push('detail')" :src="item.imgurl" alt="" />
                <div :style="{ flex: 1, marginLeft: '16px' }">
                  <p class="p1">
                    <span class="s1">{{ item.title }}</span>
                  </p>
                  <p>{{ item.city }}</p>
                  <h1></h1>
                  <p class="p2">
                    <span class="s3">2019-10-12 21:00:00</span>
                    <van-button>删除</van-button>
                    <span class="s4">{{ item.price }}</span>
                  </p>
                </div>
              </div>
            </template>
          </van-skeleton>
        </van-tab>
      </van-tabs>
    </div>
    </div>
</template>

<style lang="scss" scoped>
.van-swipe-cell{
    position: relative;
}

.van-button{
    position: absolute;
    top: 70px;
    right: 10px;
}
// /提及民宿
.van-skeleton {
  margin-top: 5px;
}

img {
  width: 94px;
  height: 94px;
  border-radius: 10px;
}

.p1 {
  display: flex;
  justify-content: space-between;
}
.p1 .s1{
  font-size: 15px;
}


.p2 {
  display: flex;
  justify-content: space-between;
}

.p2 > .s3 {
  color: gray;
}

.p2 > .s4 {
  font-size: 15px;
  color: orange;
}
</style>

